<template>
    <div>
			<div v-if="loadzhengchen">
				<!--搜索-->
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div class="searchtop">
						<div class="search">
							<div class="searchtext">
								<img src="../../../src/assets/img/shouye/sousuo.png" alt="" class="i1">
								<input type="text" placeholder="请输入相关课程关键字" v-model="input" @focus="bol = false" class="input1">
							</div>
								<span @click="search()" style="color:rgba(51,51,51,1);">搜索</span>
						</div>

					<!--下拉框-->
					<!-- <div :class="searchBarFixed?'fix':'rel'"> -->
					<div class="rel">
						<div style="width:6.9rem;margin:auto;display: flex;justify-content:space-around;height: 0.8rem;align-items: center;background: #fff;">
							<!--第一个联动-->
							<div class="shang" @click="btn()" >
								<span :class="quanbu?'blue':'gray'">{{pracite}}</span>
								<img :src="quanbu?imgSrc1:imgSrc2" alt="">
								<!-- <img :src="quanbu?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
						
							</div>
						
							<!--第二个联动-->
						
							<div class="shang" @click="btn1()" >
								<span :class="quanbu1?'blue':'gray'">{{pracite1}}</span>
								<img :src="quanbu1?imgSrc1:imgSrc2" alt="">
								<!-- <img :src="quanbu1?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
						
							</div>
							<!--第三个联动-->
							<div class="shang" @click="btn2()" >
								<span :class="quanbu2?'blue':'gray'">{{pracite2}}</span>
									<img :src="quanbu2?imgSrc1:imgSrc2" alt="">
									<!-- <img :src="quanbu2?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
							</div>
						</div>
						<div class="pos">
							<div style="overflow-y:scroll;max-height:5rem">
							<transition name="fade">
								<!--第一个-->

								<div  v-if="quanbu" style="background: #fff">
									<div class="xia" v-for="(item,index) in one" @click="xi(item,index)">
										<span :class="item.class_name == pracite?'spanspan1':'spanspan'">{{item.class_name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.class_name == pracite">
										<p></p>
									</div>
								</div>

								<!--第二个-->
								<div  v-if="quanbu1" style="background: #fff">
									<div class="xia" v-for="(item,index) in two" @click="xi1(item,index)">
										<span :class="item.name == pracite1?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite1">
										<p></p>
									</div>
								</div>

								<!--第三个-->
								<div  v-if="quanbu2" style="background: #fff">
									<div class="xia" v-if="quanbu2" v-for="(item,index) in t" @click="xi2(item)">
										<span :class="item.name == pracite2?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite2">
										<p></p>
									</div>
								</div>

							</transition>
							</div>
						</div>
						
					</div>
				</div>
				<!--内容-->
				<div class="pad">
					
						<ul id="dataList0">
							<li class="data-li" v-for="(item,index) in tab0.list">
							<div class="n" @click="tapclick(item)">
								<img :src="img+item.thumb" alt="" class="img1">
								<div class="right">
									<p>{{item.name}}</p>
									<p class="righttwo">
										<!-- <span><img src='static/img/colorren.png' mode=""/>{{item.hits}}人已加入</span> -->
										<span class="righttag">{{item.tag_name}}</span>
										<span v-if="item.price==0.00||item.price=='0.00'||item.price==0||item.price=='0'" class="pricefree">免费</span>
										<span v-else>￥{{item.price}}</span>
									</p>
								</div>
							</div>
							</li>
						</ul>

				</div>
			 </mescroll-vue>
			</div>
			<div class="loadmore" v-else>
			  <img src="../../../src/assets/img/load.gif" alt="">
			</div>
    </div>

</template>
<script>
  import { MessageBox } from 'mint-ui';
	// 引入mescroll的vue组件
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Sjieguo",
				components: {
				  MescrollVue
				},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						imgSrc1: require("../../assets/img/search/shang.png"), 
						imgSrc2: require("../../assets/img/search/bto.png"), 
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						tabType:0,
            b:false,
						loadzheng:false,
						loadzhengchen:false,
						noloadzheng:false,
            img:this.$store.state.img,
            bol:true,
            quanbu:false,
            quanbu1:false,
            quanbu2:false,
            arr:[],
						allLoaded:false,
            input:'',
            pracite:'全部专业',
            pracite1:'全部分类',
            pracite2:'全部',
            one:[],
            two:[
              {
                name:'全部分类',
                sub_id:''
              }
            ],
            t:[
              {
                name:'全部',
                lass_id:''
              }
            ],
            class_id:'',
            sub_id:'',
            lass_id:'',
            searchBarFixed:false,
						page:1,
						inputarrnew:[],
          }
      },
      methods:{
				// 点击跳转
				tapclick(item){
					// console.log(11);
					var tag = item.tag;
					var id = item.id;
					
					// tag 1  2班级  3专题 4课程
					if(tag==4||tag=='4'){
						var type = item.type;
						this.$router.push({
							path:'/course',
							query:{
							 cid:id
							}
						})
						
					}else if(tag==3||tag=='3'){
							this.$router.push({
							path:'/specialtopic',
							query:{
							 stid:id
							}
						})
					}else{
						this.$router.push({
						path:'/class',
						query:{
						 bid:id
						}
					 })
					}
				},

        search(){
					// console.log(111);
					var newinput = this.inputarrnew;
					this.loadzhengchen=false;
					// console.log(newinput.length);
					// console.log(newinput);
					var a=0;
					var b=0;
					// console.log(newinput.length);
					// var inputarr = '';
					if(newinput.length!='0'||newinput.length!=0){
						for(var i=0;i<newinput.length;i++){
							if(this.input==newinput[i]){
								a++
							}else{
								b++
							}
						}
					}else{
						this.inputarrnew = newinput.concat(this.input);
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}
					
					if(a==1||a=='1'){
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}else if(b==1||b=='1'){
						this.inputarrnew = newinput.concat(this.input);
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}else if(a==0||a=='0'){
						this.inputarrnew = newinput.concat(this.input);
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}else if(b==0||b=='0'){
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}
					// console.log(inputarr);
					
          sessionStorage.setItem('input',this.input);
					// this.mescrollpage();
					this.class_id = '';
					this.lass_id = '';
					this.lass_id = '';
					this.pracite='全部专业'
					this.pracite1 = '全部分类'
					this.pracite2 = '全部'
					this.changeTab();
        },
        btn(){
         this.quanbu = !this.quanbu;
          this.quanbu1 = false;
          this.quanbu2 = false;
        },
        btn1(){
          this.quanbu1 = !this.quanbu1;
          this.quanbu = false;
          this.quanbu2 = false;
        },
        btn2(){
          this.quanbu2 = !this.quanbu2;
          this.quanbu = false;
          this.quanbu1 = false;
        },
        xi(item,index){
          //点击第一个联动
          this.pracite = item.class_name;
          this.quanbu = !this.quanbu;
          if (index!=0){
            this.thr(index)
          }else {
            this.sub_id = '';
            this.lass_id = '';

            this.two = [{
              name:'全部分类',
              sub_id:''
            }]
            this.t = [{
              name:'全部',
              lass_id:''
            }]
            this.pracite1 = '全部分类'
            this.pracite2 = '全部'
          }
          this.pracite1 = '全部分类'
          this.pracite2 = '全部'

          this.class_id = item.class_id;
					this.sub_id = '';
					this.lass_id = '';
          // this.page=1;
          // this.information(0);
					this.changeTab();
        },
        xi1(item,index){
          this.pracite1 = item.name;
          this.quanbu1 = !this.quanbu1;

          if (index!=0){
            this.thre(index)
          }else {
            this.t = [{
              name:'全部',
              lass_id:''
            }]
            this.pracite2 = '全部'
            this.lass_id = '';
          }

          this.pracite2 = '全部'
          this.sub_id = item.sub_id;
					this.lass_id = '';
					this.changeTab();
//           this.page=1;
//           this.information(0);
        },
        xi2(item){
          this.pracite2 = item.name;
          this.quanbu2 = !this.quanbu2;
          // console.log(item)
          this.lass_id = item.lass_id;
					this.changeTab();
          // this.information(0);
        },
        thr(index){
          //获取第二个
						this.two = this.one[index].sub;
						for (var i = 0;i<this.two.length;i++){
							if (this.two[i].sub_id == ''){
								this.two.splice(0,1);
							}
						}
						var obj = {
							name:'全部分类',
							sub_id:''
						}
						this.two.unshift(obj);
						// console.log(this.two)
        },
        thre(index){
        //获取第三个
          this.t = this.two[index].lass;
          for (var i = 0;i<this.t.length;i++){
            if (this.t[i].lass_id == ''){
              this.t.splice(0,1);
            }
          }

          var obj = {
            name:'全部',
            lass_id:''
          }
          this.t.unshift(obj);
        },
				changeTab () {
					this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
					this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
				},
				getTabData (tabType) {
				  if (tabType == null) tabType = this.tabType;
				  if (tabType === 0) {
				    return this.tab0;
				  }
				},
				mescrollInit0 (mescroll) {
				  this.tab0.mescroll = mescroll;
				},
				getMescrollUp (tabType) {
					let emptyWarpId = 'dataList0';
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						 empty: {
						  warpId: emptyWarpId, // 父布局的id;
						  icon: this.imgSrc, // 图标,默认null
						  tip: '暂时没有找到您所需要的内容…', // 提示
						},
				    
				  }
				},
				upCallback (page, mescroll) {
					var that = this;
					// setTimeout(function(){
						that.axios.get(that.$store.state.url +'home/search',{
							params:{
								keyword:sessionStorage.getItem('input'),
								class_id:that.class_id,
								sub_id:that.sub_id,
								lass_id:that.lass_id,
								page:page.num,
								limit:page.size,
								new:1,
							},
						}).then(res=>{
							if(res.data.errcode==0||res.data.errcode=='0'){
								this.loadzhengchen=true;
								var curPageData = res.data.data;
								  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
								 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
								 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
								 // this.tab0.list=res.data.data.order
								}
							// }
						})
				},

      },
			destroyed(){
			},
      mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
				

          //获取三级联动
        this.axios.get(this.$store.state.url + "home/searchCate").then(res=>{
					

          if (res.data.errcode == 0||res.data.errcode == '0'){
            this.one = res.data.data
            var obj = {
              class_name:'全部专业',
              class_id:''
            }
            this.one.unshift(obj);
						this.loadzhengchen=true;
          }
        })
				
				this.input = sessionStorage.getItem('input');
				// console.log(localStorage.inputarr);
				if(localStorage.inputarr){
					// console.log(8989)
					this.inputarrnew = JSON.parse(localStorage.getItem('inputarr'));
				}else{
					this.inputarrnew = [];
				}
				

      //  获取页面信息
        // this.information(0);
        //滚动到固定位置停下
        // window.addEventListener('scroll', this.handleScroll)
      },
      computed:{

      }
    }
</script>

<style scoped>
	/*展示上拉加载的数据列表*/
	.data-li{
	  position: relative;
		padding-bottom: .3rem;
	  border-bottom: 1px solid #EDEDED;
	}
  .rel{
    position: relative;
    background: #fff;
  }
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
	.searchtop{
		 position: fixed;
		top: 0;
		background: #fff;
		width: 7.5rem;
		z-index: 9999;
	}
  .fix{
    position: fixed;
   top: 0;
   background: #fff;
   width: 7.5rem;
   z-index: 9999;
  }
  .pad{
    padding-bottom: 0.6rem;
    background: #fff;
    overflow: hidden;
		margin-top: 1.5rem;
		/* padding-top: 1.5rem; */
  }
	.dataList0{
		margin-top: 1.5rem;
	}
  .mar{
    margin-top: 0.8rem;
    padding-bottom: 0.4rem;
    background: #fff;
    overflow: hidden
  }
	.pricefree{
		color: #0287FF !important;
	}
    .search{
      width: 92%;
      margin: auto;
      height: 0.56rem;
      margin-top: 0.2rem;
			display: flex;
			justify-content: space-around;
      /* position: relative; */
    }
    .searchtext{
    	width: 5.9rem;
    	height: .56rem;
    	background: #F0F0F0;
    	border-radius:0.28rem;
    	border:0.01rem solid #EDEDED;
			overflow: hidden;
    }
    .input{
      width: 4.2rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	background: #F0F0F0;
			text-align: center;
    }
    .input1{
      width: 5rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	background: #F0F0F0;
			text-align: center;
    }
    .search span{
      font-size:0.28rem;
      margin-left: 0.3rem;
    	display: inline-block;
    	line-height: .56rem;
    }
    .i{
      width: 0.32rem;
     height: .32rem;
     margin-left: 1.19rem;
     margin-top: .13rem;
    }
    .i1{
       width: 0.32rem;
      height: .32rem;
      margin-left: .1rem;
      margin-top: .13rem;
    }
    .n{
      width: 92%;
      margin: auto;
      margin-top: 0.2rem;
			display: flex;
			justify-content: flex-start;
    }
		/* .n{
		} */
  .img1{
    width: 2.1rem;
    height: 1.18rem;
    border-radius:0.08rem;
		overflow: hidden;
  }
  .right{
    width: calc(92% - 2.1rem);
    height: 100%;
    margin-left: .2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .right p{
    width: 100%;
  }
	.right .righttwo{
	  margin-top: 0.18rem;
	}
	.right .righttwo span:nth-child(1){
	  box-sizing: border-box;
	  font-size: 0.24rem;
	  line-height:0.32rem;
		color: #C2C9D3;
	}
	.righttag{
		color: #0287FF !important;
		font-size: .24rem !important;
		border: 1px solid #0287FF !important;
		border-radius: .19rem;
		padding:0.05rem 0.18rem;
	}
	.right .righttwo span:nth-child(1) img{
		  width: .32rem;
		  height: .32rem;
		  vertical-align: middle;
	}
  .right p:nth-child(1){
		height: .6rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
  }
    .right p:nth-child(2) span:nth-child(2){
      float: right;
      font-size:0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
      line-height:0.32rem;
    }
  .shang{
   width: 30%;
    height: 0.5rem;
    display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{

    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    width: 0.15rem;
    height: 0.12rem;
    margin-left: 0.14rem;
  }
  .xia{
    width: 92%;
    margin: auto;

    /*margin-top: 0.2rem;*/
   padding-top: 0.2rem;
  }
  .spanspan{
      font-size:0.28rem;
      color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
    /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;

    position: absolute;
    top: 0.7rem;
    left: 0;
  }
  /*.one{*/
    /*display: inline-block;*/
  /*}*/
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.25s ease-out;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
</style>
